<!-- ASF Widget tag library documentation
  -  Copyright (C) 2013, 2014 Stephane Carrez
  -  Written by Stephane Carrez (Stephane.Carrez@gmail.com)
  -
  -  Licensed under the Apache License, Version 2.0 (the "License");
  -  you may not use this file except in compliance with the License.
  -  You may obtain a copy of the License at
  -
  -      http://www.apache.org/licenses/LICENSE-2.0
  -
  -  Unless required by applicable law or agreed to in writing, software
  -  distributed under the License is distributed on an "AS IS" BASIS,
  -  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  -  See the License for the specific language governing permissions and
  -  limitations under the License.
  -->
<c:choose xmlns:c="http://java.sun.com/jstl/core"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:ui="http://java.sun.com/jsf/facelets"
          xmlns:util="http://code.google.com/p/ada-asf/util">
    <!-- For security reasons, check that the code parameter matches what is allowed  -->

    <c:when test="#{empty param['code'] or param['code'] eq 'accordion'}">
        <ui:decorate template="/WEB-INF/layouts/doc.xhtml">
            <ui:param name="name" value="w:accordion"/>
            <ui:define name="description">
                The <b>w:accordion</b> component provides a vertical tab component.
            </ui:define>
            <ui:define name="attributes">
                <li class="attr-optional">
                    <b>rendered</b>
                    <i>Boolean</i>
                    <span>Flag indicating whether or not this component should be rendered (during Render Response Phase),
                        or processed on any subsequent form submit. The default value for this property is true.</span>
                </li>
                <li class="attr-optional">
                    <b>collapsible</b>
                    <i>Boolean</i>
                    <span>This flag indicates whether the accordion must close all the sections at once.</span>
                </li>
            </ui:define>
        </ui:decorate>
    </c:when>

    <c:when test="#{param['code'] eq 'autocomplete'}">
        <ui:decorate template="/WEB-INF/layouts/doc.xhtml">
            <ui:param name="name" value="w:autocomplete"/>
            <ui:define name="description">
                The <b>w:autocomplete</b> component combines the <b>h:inputText</b> and <b>h:message</b>
                components and provides autocomplete functionality on the input field.  It renders the title
                and the input form field.  The error message associated
                with the input field is rendered if there is one.  The title, input field and message
                are combined within an HTML <b>dl</b>, <b>dt</b> and <b>dd</b> elements.
                <p>
                    When the user enters some text, the form is submitted for autocompletion.
                    The <b>w:autocomplete</b> component handles the form submission and uses the
                    <b>autocompleteList</b> attribute to find out possible completions.  It then returns
                    that list that is then displayed by the client.
                </p>
            </ui:define>
            <ui:define name="attributes">
                <li class="attr-optional">
                    <b>rendered</b>
                    <i>Boolean</i>
                    <span>Flag indicating whether or not this component should be rendered (during Render Response Phase),
                        or processed on any subsequent form submit. The default value for this property is true.</span>
                </li>
                <li class="attr-optional">
                    <b>title</b>
                    <i>String</i>
                    <span>The title to display for the input field.</span>
                </li>
                <li class="attr-optional">
                    <b>autocompleteList</b>
                    <i>String</i>
                    <span>The list of values for the autocompletion.</span>
                </li>
            </ui:define>
        </ui:decorate>
    </c:when>

    <c:when test="#{param['code'] eq 'inputText'}">
        <ui:decorate template="/WEB-INF/layouts/doc.xhtml">
            <ui:param name="name" value="w:inputText"/>
            <ui:define name="description">
                The <b>w:inputText</b> component combines the <b>h:inputText</b> and <b>h:message</b>
                components.  It renders the title and the input form field.  The error message associated
                with the input field is rendered if there is one.  The title, input field and message
                are combined within an HTML <b>dl</b>, <b>dt</b> and <b>dd</b> elements.
            </ui:define>
            <ui:define name="attributes">
                <li class="attr-optional">
                    <b>rendered</b>
                    <i>Boolean</i>
                    <span>Flag indicating whether or not this component should be rendered (during Render Response Phase),
                        or processed on any subsequent form submit. The default value for this property is true.</span>
                </li>
                <li class="attr-optional">
                    <b>title</b>
                    <i>String</i>
                    <span>The title to display for the input field.</span>
                </li>
            </ui:define>
        </ui:decorate>
    </c:when>

    <c:when test="#{param['code'] eq 'gravatar'}">
        <ui:decorate template="/WEB-INF/layouts/doc.xhtml">
            <ui:param name="name" value="w:gravatar"/>
            <ui:define name="description">
                This component renders an image whose link is the gravatar's link of
                a person's email address.

                See <a href="https://en.gravatar.com/site/implement/images/">gravatar.com</a>.
            </ui:define>
            <ui:define name="attributes">
                <li class="attr-required">
                    <b>email</b>
                    <i>String</i>
                    <span>The email address to create the gravatar image link.</span>
                </li>
                <li class="attr-optional">
                    <b>rendered</b>
                    <i>Boolean</i>
                    <span>Flag indicating whether or not this component should be rendered (during Render Response Phase),
                        or processed on any subsequent form submit. The default value for this property is true.</span>
                </li>
                <li class="attr-optional">
                    <b>secure</b>
                    <i>Boolean</i>
                    <span>When True, the secure link to the gravatar image is created (https).  The default creates
                        an <em>http</em> link only.</span>
                </li>
                <li class="attr-optional">
                    <b>size</b>
                    <i>Integer</i>
                    <span>The size of the gravatar image (from 1 to 2048 pixels max).</span>
                </li>
                <li class="attr-optional">
                    <b>default</b>
                    <i>String</i>
                    <span>.</span>
                </li>
                <li class="attr-optional">
                    <b>alt</b>
                    <i>String</i>
                    <span>The image <em>alt</em> attribute. By default, the email address is used for the
                        <em>alt</em> attribute.</span>
                </li>
            </ui:define>
        </ui:decorate>
    </c:when>

    <c:when test="#{param['code'] eq 'like'}">
        <ui:decorate template="/WEB-INF/layouts/doc.xhtml">
            <ui:param name="name" value="w:like"/>
            <ui:define name="description">
                This component renders a like button for Facebook, Twitter or Google+ (more like implementations
                can be added programatically in Ada).  The like button code is rendered within a <b>div</b> element
                whose style and class can be customized.

                <p>
                    The <b>kind</b> attribute defines what like button must be generated.
                </p>
                <h3>Facebook</h3>
                <p>
                    The <a href="https://developers.facebook.com/docs/plugins/like-button/" rel="nofollow">
                    Facebook like button</a> is generated with the <b>facebook</b> kind attribute value.
                </p>
                <p>
                    When using the Facebook button, the component will pass several attributes to the Facebook
                    button: data-layout, data-show-faces, data-width, data-action, data-font,
                    data-colorscheme, data-ref, data-kid_directed_site, data-send.
                </p>
                <p>
                    The Facebook like button requires that you register your application and get a facebook client ID.
                    The like component will use the configuration property <b>facebook.client_id</b> to retrieve
                    this client ID.
                </p>
                <h3>Google+</h3>
                <p>
                    The Google <a href="https://developers.google.com/+/web/+1button/" rel="nofollow">+1 Button</a>
                    is generated with the <b>google+</b> kind attribute value.  You may pass several attributes
                    managed by the button such as data-annotation, data-width.
                </p>
                <h3>Twitter</h3>
                <p>
                    The <a href="https://dev.twitter.com/docs/tweet-button" rel="nofollow">Tweet Button</a> is
                    generated with the <b>twitter</b> kind attribute value.  The following attributes are
                    passed to the Tweet button: data-via, data-count, data-size.
                </p>
                <p>
                    <b>Note:</b> the live demonstation is not fonctional because the page
                </p>
            </ui:define>
            <ui:define name="attributes">
                <li class="attr-required">
                    <b>kind</b>
                    <i>String</i>
                    <span>The type of like button to generate: "facebook", "google+", "twitter".</span>
                </li>
                <li class="attr-optional">
                    <b>rendered</b>
                    <i>Boolean</i>
                    <span>Flag indicating whether or not this component should be rendered (during Render Response Phase),
                        or processed on any subsequent form submit. The default value for this property is true.</span>
                </li>
                <li class="attr-optional">
                    <b>href</b>
                    <i>String</i>
                    <span>The optional URL to pass to the like button.  The default is to use the current page URL.</span>
                </li>
                <li class="attr-optional">
                    <b>styleClass</b>
                    <i>String</i>
                    <span>The CSS class to be applied in the div element that contains the like button.</span>
                </li>
                <li class="attr-optional">
                    <b>style</b>
                    <i>String</i>
                    <span>The CSS style to be applied in the div element that contains the like button.</span>
                </li>
            </ui:define>
        </ui:decorate>
    </c:when>

    <c:when test="#{param['code'] eq 'panel'}">
        <ui:decorate template="/WEB-INF/layouts/doc.xhtml">
            <ui:param name="name" value="w:panel"/>
            <ui:define name="description">
                The <b>w:panel</b> component provides a collapsible panel with a header, a content and an optional
                footer.
            </ui:define>
            <ui:define name="attributes">
                <li class="attr-optional">
                    <b>rendered</b>
                    <i>Boolean</i>
                    <span>Flag indicating whether or not this component should be rendered (during Render Response Phase),
                        or processed on any subsequent form submit. The default value for this property is true.</span>
                </li>
                <li class="attr-required">
                    <b>header</b>
                    <i>String</i>
                    <span>The header title to display at the top of the panel.</span>
                </li>
                <li class="attr-optional">
                    <b>footer</b>
                    <i>String</i>
                    <span>The optional title to display at the bottom of the panel.</span>
                </li>
                <li class="attr-optional">
                    <b>closable</b>
                    <i>Boolean</i>
                    <span>When true, the panel can be closed by clicking on the close icon action in the header.</span>
                </li>
                <li class="attr-optional">
                    <b>toggleable</b>
                    <i>Boolean</i>
                    <span>When true, the panel can be collapsed by clicking on the expand/collapse icon action in the header.</span>
                </li>
            </ui:define>
        </ui:decorate>
    </c:when>

    <c:when test="#{param['code'] eq 'tab'}">
        <ui:decorate template="/WEB-INF/layouts/doc.xhtml">
            <ui:param name="name" value="w:tab"/>
            <ui:define name="description">
                The <b>w:tab</b> component defines a tab content to be displayed within a tab selection.
            </ui:define>
            <ui:define name="attributes">
                <li class="attr-optional">
                    <b>rendered</b>
                    <i>Boolean</i>
                    <span>Flag indicating whether or not this component should be rendered (during Render Response Phase),
                        or processed on any subsequent form submit. The default value for this property is true.</span>
                </li>
                <li class="attr-required">
                    <b>title</b>
                    <i>String</i>
                    <span>The tab title.</span>
                </li>
            </ui:define>
        </ui:decorate>
    </c:when>

    <c:when test="#{param['code'] eq 'tabView'}">
        <ui:decorate template="/WEB-INF/layouts/doc.xhtml">
            <ui:param name="name" value="w:tabView"/>
            <ui:define name="description">
                The <b>w:tabView</b> component defines a tab selection.
                It uses the <a href="http://api.jqueryui.com/tabs/">jQuery UI tabs</a>.
                Each tab must be represented by a <b>w:tab</b> component which indicates the tab
                title and content.
            </ui:define>
            <ui:define name="attributes">
                <li class="attr-optional">
                    <b>rendered</b>
                    <i>Boolean</i>
                    <span>Flag indicating whether or not this component should be rendered (during Render Response Phase),
                        or processed on any subsequent form submit. The default value for this property is true.</span>
                </li>
                <li class="attr-optional">
                    <b>collapsible</b>
                    <i>Boolean</i>
                    <span>When true, the tabs are collapsible.</span>
                </li>
                <li class="attr-optional">
                    <b>effect</b>
                    <i>String</i>
                    <span>The effect to use when switching tabs.</span>
                </li>
                <li class="attr-optional">
                    <b>duration</b>
                    <i>Integer</i>
                    <span>The effect duration.</span>
                </li>
            </ui:define>
        </ui:decorate>
    </c:when>

    <c:otherwise>
        <p>
            <h:outputFormat value="You have not selected the valid code: '{0}' is not recognized.">
                <f:param value="#{param['code']}"/>
            </h:outputFormat>
        </p>
    </c:otherwise>
</c:choose>